<template>
  <canvas style="width: 500px"></canvas>
</template>

<script>
import * as PIXI from 'pixi.js'

function createLinearGradient(color) {
  const quality = 200
  const c = document.createElement('canvas')
  c.width = quality
  c.height = 1
  const ctx = c.getContext('2d')
  const grd = ctx.createLinearGradient(0, 0, quality, 0)
  grd.addColorStop(0, 'rgba(0, 0, 0, 0)')
  grd.addColorStop(1, 'rgba(255, 0, 0, 1)')

  ctx.fillStyle = grd
  ctx.fillRect(0, 0, quality, 1)

  return PIXI.Texture.from(c)
}

export default {
  mounted() {
    const app = new PIXI.Application({
      view: this.$el,
      antialias: true,
      resolution: 2,
      width: 500,
      height: 500,
      backgroundColor: 0x000000
    })

    const graphics = new PIXI.Graphics()
    const path = [0, 0, 500, 0, 260, 400, 240, 400]

    // 绘制光线
    graphics.lineStyle(0)
    graphics.beginFill(0xffffff, 1)
    graphics.drawPolygon(path)
    graphics.endFill()

    const spr = new PIXI.Sprite(createLinearGradient())
    spr.position.set(500 /2 , 500/2)
    spr.anchor.set(0.5)
    spr.width = 500
    spr.height = 500
    spr.rotation = Math.PI / 2
    app.stage.addChild(spr)

    // 不使用遮罩 null
    graphics.mask = spr

    app.stage.addChild(graphics)
  }
}
</script>

<style>

</style>